<template>
  <div class="context" :style="contextStyle" v-if="$store.state.context.show">
    <ul class="list">
      <li class="item flex-row items-center" :class="{[item.type]:true}" :style="liStyle" v-for="(item, index) in list" :key="index" @click="handleContextClick(item)">
        <div class="icon"><i class="iconfont" :class="{[item.icon]:true}"/></div>
        <div class="label flex-1">{{item.label}}</div>
        <div class="flag"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SystemContext",
  computed:{
    client() {
      return this.$store.state.context.client
    },
    list() {
      return this.$store.state.context.list
    },
    contextStyle() {
      return {
        left: this.client.x + "px",
        top: this.client.y + "px",
        width: this.client.w + "px",
      }
    },
    liStyle() {
      return {
        width: this.client.w + "px",
      }
    }
  },
  methods:{
    handleContextClick(item) {
      this.$store.dispatch("closeContext")
      item.click && item.click.call()
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
.context{
  position: fixed;
  user-select: none;
  background-color: #f2f2f2;
  z-index: 99999;
  color: #000;
  .item{
    height: 25px;
    padding: 0 5px;
    .icon{
      width: 25px;
      height: 25px;
      //background-color: red;
      margin-right: $ms;
    }
    &:hover{
      background-color: #e0e0e0;
      color: #5b3cc4;
    }
    &:not(:last-child){
      margin-bottom: $ms;
    }
  }
  .danger{
    background-color: rgba(242, 19, 93, 0.2);
    &:hover{
      background-color: $text-danger;
      color: white;
    }
  }

}
</style>
